<template>
  <div>
    <h1>{{ count }}</h1>
    <h1>{{ statusText }}</h1>
    <h1>{{ article.title }}</h1>
    <h1>{{ article.content }}</h1>
    <div>
      <span>{{ x }}</span
      >+<span>{{ y }}</span>
    </div>
    <div>
      <button :class="['btn', btnType]"></button>
    </div>
    <div>
      <button @click="addCount">addCount</button>
      <button @click="addCount">点击</button>
    </div>
  </div>
</template>


<script>
export default {
  name: "Mydome",
  //   实在创建前完成的，不能访问到data中的数据
  props: {
    addCount: {
      type: Function,
      default() {
        console.log(123);
        console.log("sfdsef");
      },
    },
    // null nudefined可以通过任何数据类型检查
    count: Number,
    //数据类型可以是number，也可以是string
    status: [Number, String],
    // required必须传递
    content: {
      type: String,
      //   required: true,
    },
    // default在数据没有传递过来的时候，设置的默认值
    x: {
      type: Number,
      default: 0,
    },
    y: {
      type: Number,
      default: 0,
    },
    article: {
      type: Object,
      // 避免对象引用冲突
      default() {
        return {
          title: "默认标签",
          content: "默认内容",
        };
      },
    },
    //validator自定义验证规则
    btnType: {
      validator(value) {
        console.log(value);
        return ["prmiary", "warning", "success", "danger"].includes(value);
      },
    },
  },
  computed: {
    statusText() {
      const status = Number(this.status);
      return status == 1 ? "推荐" : "热门";
    },
  },
  data() {
    return {};
  },

  mounted() {
    console.log(this.addCount);
  },

  methods: {},
};
</script>

<style scoped>
.btn {
  height: 34px;
  padding: 0 15px;
  border: none;
  outline: none;
}
.btn.prmiary {
  background-color: blue;
}
.btn.warning {
  background-color: orange;
}
.btn.success {
  background-color: green;
}
.btn.danger {
  background-color: yellow;
}
</style>